<template>
	<view :class="APP_FONT_SIZE">
		<custom title="个人信息" mode="2" fixed="fixed"></custom>

		<!-- <view class="user-info">
      <view style="height: 60rpx" class="flex flex-x-b flex-y-c">
        <view class="left flex flex-y flex-x-a">
          <view class="title"> 同步微信头像、昵称 </view>
          <view class="info fs-20"> 方便好友辨认您的身份 </view>
        </view>
        <view class="right">
          <view class="button"> 同步 </view>
        </view>
      </view>
    </view> -->
		<view class="mt-20" @tap.stop="choose_image">
			<setting-item text="头像">
				<image slot="right" :src="userinfo.avatarUrl" class="avater"></image>
			</setting-item>
		</view>

		<view class="" @tap.stop="toPage('/pages/user/edit?type=' + 0)">
			<setting-item text="名字">
				<text slot="right">{{ userinfo.name }}</text>
			</setting-item>
		</view>

		<setting-item text="我的二维码" @onClick="toPage('/pages/user/code')">
			<view slot="right" class="iconfont icon-erweima fs-36"></view>
		</setting-item>
		<!-- <setting-item text="地区" class="mt-20">
			<text slot="right">中国</text>
		</setting-item> -->
		<view class="">
			<setting-item text="性别">
				<view style="width:70vw;text-align:right;" slot="right">
					<picker @change="genderChange" :value="genderIndex" :range="genders">
						<view class="uni-input">{{genders[genderIndex]}}</view>
					</picker>
				</view>
			</setting-item>
		</view>
		<view class="" @tap.stop="toPage('/pages/user/edit?type=' + 1)">
			<setting-item text="签名">
				<text slot="right">{{ userinfo.signature }}</text>
			</setting-item>
		</view>
		<powers ref="powers"></powers>
		<powers1 ref="powers1" type="top" @changeAuth="changeAuth" :permissionID="permissionID"></powers1>
	</view>
</template>

<script>
	import powers1 from '@/components/powers/powers1.vue'
	let utils = require("../../utils/util");
	import settingItem from "../../components/setting-item/setting-item.vue";
	export default {
		data() {
			return {
				permissionID: '',
				remark: "",
				userinfo: {
					avatarUrl: "../../static/images/rentou.png",
					name: "",
					signature: "",
				},
				genders: ['未知', '男', '女'],
				genderIndex: 0
			};
		},

		components: {
			powers1,
			settingItem
		},
		onShow() {
			const {
				avatarUrl,
				name,
				signature,
				gender
			} = this.user_info;
			this.userinfo = {
				avatarUrl: avatarUrl || "../../static/images/rentou.png",
				name: name || "",
				signature: signature || "",
			};
			this.genderIndex = gender

		},
		methods: {
			genderChange(e) {
				this.request({
					url: "/user/update",
					loading: true,
					method: 'POST',
					data: {
						gender: e.target.value,
					},
				}).then((res) => {
					if (res.status === 200) {
						this.showToast("修改成功");
						this.$store.dispatch("refresh_user");
						this.genderIndex = e.target.value
						this.$refs.popup.close()
					}
				});
			},
			// 现在的
			choose_image(permissionID) {
				this.permissionID = 'POWERS_IMAGE',
					setTimeout(() => {
						this.$refs['powers1'].open();
					}, 500)
			},
			//用户授权权限后的回调
			changeAuth() {
				utils.upload_one(url => {
					this.request({
						url: "/user/update",
						loading: true,
						data: {
							avatarUrl: url,
							name: this.user_info.name,
						},
						method: "POST",
						loading: true,
					}).then((res) => {
						if (res.status == 200) {
							this.showToast("修改成功");
							this.$store.dispatch("refresh_user");
							this.userinfo.avatarUrl = url;
						}
					});
				});
				//这里是权限通过后执行自己的代码逻辑
				console.log('权限已授权，可执行自己的代码逻辑了');
			},
			// choose_image() {

			// 	this.$refs.powers.open({
			// 		powersType: 'POWERS_IMAGE',
			// 		success: () => {
			// 			////////////
			// 			utils.upload_one((url) => {
			// 				this.request({
			// 					url: "/user/update",
			// 					loading: true,
			// 					data: {
			// 						avatarUrl: url,
			// 						name: this.user_info.name,
			// 					},
			// 					method: "POST",
			// 					loading: true,
			// 				}).then((res) => {
			// 					if (res.status == 200) {
			// 						this.showToast("修改成功");
			// 						this.$store.dispatch("refresh_user");
			// 						this.userinfo.avatarUrl = url;
			// 					}
			// 				});
			// 			});
			// 			////////////
			// 		}
			// 	});


			// },
		},
	};
</script>

<style lang="scss">
	page {
		background-color: $pageColor;
		font-size: 26rpx;

	}

	.user-info {
		padding: 30rpx;

		.info {
			color: #666666;
		}
	}

	.button {
		padding: 0 15rpx;
		border: 1px solid #000;
		border-radius: 10rpx;
	}

	.avater {
		width: 80rpx;
		height: 80rpx;
		border-radius: 80rpx;
	}

	.item {
		text-align: center;
		height: 120rpx;
		line-height: 120rpx;
		background-color: #fff;
		border: 0.5px solid #eeeff3;
	}
</style>